<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData" label-width="100px" label-position="right" >
      <el-form-item label="申请编号">
        <el-input @change="searchChange" v-model="formData.sn" placeholder="申请编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="收货人姓名">
        <el-input @change="searchChange" v-model="formData.receiver" placeholder="收货人姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="收货人手机号">
        <el-input @change="searchChange" v-model="formData.receiverMobile" placeholder="收货人手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="合伙人姓名">
        <el-input @change="searchChange" v-model="formData.partnerName" placeholder="合伙人姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="合伙人手机号">
        <el-input @change="searchChange" v-model="formData.partnerMobile" placeholder="合伙人手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select v-model="formData.applyDeviceType" @change="selectDeviceTypeChange" clearable>
          <el-option label="电动自行车" value="0"></el-option>
          <el-option label="充电汽车" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备型号">
        <el-select v-model="formData.chargingTypeId" @change="searchChange" placeholder="请先选择设备类型" clearable>
          <el-option v-for="(item, index) in chargingTypeListFilter" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker
          v-model="formData.createDate"
          @change="searchChange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发货时间">
        <el-date-picker
          v-model="formData.deliveryDate"
          @change="searchChange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="申请状态">
        <el-select v-model="formData.status" @change="searchChange" clearable>
          <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchChange">搜索</el-button>
      </el-form-item>
    </el-form>
    <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               :table-loading="dataListLoading"
               :option="tableOption"
               @size-change="sizeChange"
               @current-change="currentChange">
      <template slot-scope="scope" slot="info">
        <div class="cell">
          <div>姓名：<span>{{scope.row.partnerName}}</span></div>
          <div>手机号码：<span>{{scope.row.partnerMobile}}</span></div>
          <div>申请编号：<span>{{scope.row.sn}}</span></div>
          <div>所属运营商：<span>{{scope.row.merchantName}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="pileCondition">
        <div class="cell">
          <div>授信充电桩台数：<span>{{scope.row.creditNum}}</span></div>
          <div>已安装充电桩台数：<span>{{scope.row.installNum}}</span></div>
          <div>未安装充电桩台数：<span>{{scope.row.notInstallNum}}</span></div>
          <div>未申请充电桩台数：<span>{{scope.row.notApplyInstallNum}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="auditInfo">
        <div class="cell">
          <div class="item" v-for="(pile, index) in scope.row.applyChargingDetailList" :key="index">
            <div>类型：<span>{{pile.name}}</span></div>
            <div>台数：<span>{{pile.count}}</span></div>
          </div>
        </div>
      </template>
      <template slot-scope="scope" slot="deliveryInfo">
        <div class="cell">
          <div>发货台数：<span>{{scope.row.deliveryNum}}</span></div>
          <div>发货时间：<span>{{scope.row.deliveryTime}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="receiverInfo">
        <div class="cell">
          <div>收货人姓名：<span>{{scope.row.receiver}}</span></div>
          <div>收货人手机号：<span>{{scope.row.receiverMobile}}</span></div>
          <div>申请原因：<span>{{scope.row.reason}}</span></div>
          <div>收货地址：<span>{{scope.row.address}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="chargeMode">
        <div class="cell">
          <div>计费方式：<span>{{scope.row.billingMethod}}</span></div>
          <div>计费规则：<span>{{scope.row.chargingRule}}</span></div>
          <div>收费方式：<span>{{scope.row.chargingMethod}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="refundInfo">
        <div class="cell">
          <div>是否退过款：<span>{{scope.row.isRefund == 0?'否':'是'}}</span></div>
          <div>订单实际支付金额：<span>{{scope.row.actualAmount}}</span></div>
          <div>退款金额：<span>{{scope.row.refundAmount}}</span></div>
          <div>退款原因：<span>{{scope.row.refundReason}}</span></div>
        </div>
      </template>
      <template slot-scope="scope"
                slot="menu">
        <div class="menu-list">
          <el-button type="primary"
                     size="small"
                     icon="el-icon-view"
                     @click.stop="lookOrUpdate(scope.row, 1)" round>查看</el-button>
        </div>
        <div class="menu-list">
          <el-button type="primary"
                     size="small"
                     icon="el-icon-edit"
                     v-if="scope.row.status==0"
                     @click.stop="lookOrUpdate(scope.row, 2)" round>编辑</el-button>
        </div>
        <div class="menu-list">
          <el-button type="success"
                     size="small"
                     icon="el-icon-position"
                     v-if="scope.row.status==2"
                     @click.stop="deliver(scope.row)" round>发货</el-button>
        </div>
        <div class="menu-list">
          <el-button type="success"
                     size="small"
                     v-if="scope.row.status==0"
                     @click.stop="audit(scope.row)" round>审核</el-button>
        </div>
        <div class="menu-list">
          <el-button type="success"
                     size="small"
                     @click.stop="backFreight(scope.row)" round>退运费</el-button>
        </div>
        <div class="menu-list">
          <el-button type="primary"
                     size="small"
                     icon="el-icon-view"
                     @click.stop="lookExpress(scope.row, 1)" round>设置物流</el-button>
        </div>
        <div class="menu-list">
          <el-button type="primary"
                     size="small"
                     icon="el-icon-view"
                     @click.stop="lookExpress(scope.row, 2)" round>查看物流</el-button>
        </div>
        <div class="menu-list">
          <el-button type="primary"
                     size="small"
                     icon="el-icon-view"
                     v-if="scope.row.status==3"
                     @click.stop="detail(scope.row)" round>查看信息</el-button>
        </div>
      </template>
    </avue-crud>
    <power-diagram ref="powerDiagram" v-if="showPowerDiagram"></power-diagram>
    <check-express ref="checkExpress" v-if="showCheckExpress" @refreshDataList="refreshChange"></check-express>
    <back-freight ref="backFreight" v-if="showBackFreight" @refreshDataList="refreshChange"></back-freight>
    <audit-pile-info ref="audit" v-if="showAudit" @refreshDataList="refreshChange"></audit-pile-info>
    <pile-detail-info ref="pileDetailInfo"></pile-detail-info>
  </div>
</template>

<script>
  import checkExpress from './checkExpress'
  import backFreight from './backFreight'
  import auditPileInfo from './auditPileInfo'
  import pileDetailInfo from './pileDetailInfo'
  import { tableOption } from '@/crud/pile/pileList'
  export default {
    components: {
      checkExpress,
      backFreight,
      auditPileInfo,
      pileDetailInfo
    },
    data () {
      return {
        dataList: [],
        dataListLoading: false,
        showPowerDiagram: false,
        showOrderRefund: false,
        showCheckExpress: false,
        showBackFreight: false,
        showPileDetailInfo:false,
        showAudit: false,
        tableOption: tableOption,
        formData: {
          sn: '',
          receiver: '',
          receiverMobile: '',
          partnerName: '',
          partnerMobile: '',
          chargingTypeId: '',
          status: '',
          createDate: '',
          deliveryDate: '',
        },
        chargingTypeList: [],
        chargingTypeListFilter: [],
        statusList: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '申请已提交',
            value: 0
          },
          {
            label: '审核通过',
            value: 1
          },
          {
            label: '待发货',
            value: 2
          },
          {
            label: '已发货',
            value: 3
          },
          {
            label: '已收货',
            value: 4
          },
          {
            label: '驳回',
            value: 5
          }
        ],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        options: [],
        props: {
          multiple: false,
          label: 'name',
          value: 'id',
          children: 'childs'
        },
        totalCount: 0,
        todayCount: 0,
        remainTotalMoney: 0,
        remainMoney: 0,
        remainGiveMoney: 0
      }
    },

    mounted () {
      this.getChargingTypeList()
      this.getDataList()
    },

    methods: {
      // 获取数据列表
      getDataList (page, params) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/v1/apply/charging/list'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize
              },
              params
            )
          )
        }).then(({ data }) => {
          console.log(data)
          this.dataList = data.data.applyChargingDtoIPage.records
          this.page.total = data.data.applyChargingDtoIPage.total
          this.dataListLoading = false
        })
      },

      getChargingTypeList () {
        this.$http({
          url: this.$http.adornUrl('/v1/charging/type/list'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          this.chargingTypeList = data.data
          this.chargingTypeListFilter = data.data
        })
      },
      selectDeviceTypeChange(e){
        this.chargingTypeListFilter=[]
        this.formData.chargingTypeId = null
        this.chargingTypeListFilter = this.chargingTypeList.filter(function(x){
          if(x.deviceType==e){
            return x
          }
        })
        this.searchChange()
      },
      // 条件查询
      searchChange () {
        console.log(this.formData)
        if(this.formData.createDate&&this.formData.createDate.length > 0) {
          this.formData.applyStartTime = this.formData.createDate[0]
          this.formData.applyEndTime = this.formData.createDate[1]
        }
        else {
          this.formData.applyStartTime = ''
          this.formData.applyEndTime = ''
        }
        if(this.formData.deliveryDate&&this.formData.deliveryDate.length > 0) {
          this.formData.deliveryStartTime = this.formData.createDate[0]
          this.formData.deliveryEndTime = this.formData.createDate[1]
        }
        else {
          this.formData.deliveryStartTime = ''
          this.formData.deliveryEndTime = ''
        }
        this.getDataList(this.page, this.formData)
      },

      /**
       * 刷新回调
       */
      refreshChange () {
        this.getDataList(this.page)
      },

      lookOrUpdate (row, type) {
        this.$router.push({
          name: type == 1 ? 'pileInfo' : 'updatePileInfo',
          query: {
            id: row.id
          }
        })
      },
      //发货
      deliver (row) {
        this.$router.push({
          name: 'deliverPile',
          query: {
            id: row.id
          }
        })
      },

      // 查看物流
      lookExpress (row, type) {
        this.showCheckExpress = true
        this.$nextTick(() => {
          this.$refs['checkExpress'].init(row, type)
        })
      },

      // 退运费
      backFreight (row) {
        this.showBackFreight = true
        this.$nextTick(() => {
          this.$refs['backFreight'].init(row)
        })
      },

      // 审核
      audit (row) {
        this.showAudit = true
        this.$nextTick(() => {
          this.$refs['audit'].init(row.id)
        })
      },

      detail(row){
        this.showPileDetailInfo=true
        console.log(row)
        this.$nextTick(()=>{
          this.$refs['pileDetailInfo'].init({applyChargingId:row.id})
        })
      },

      sizeChange(val){
        this.page.pageSize=val
        this.getDataList(this.page, this.formData)
      },
      currentChange(val){
        this.page.currentPage=val
        this.getDataList(this.page, this.formData)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cell{
    text-align: left;
  }
  .el-input{
    width: 200px;
  }
  .menu-list{
    margin-bottom: 10px;
  }
  .item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    div{
      margin-right: 10px;
    }
  }
  .menu-list .el-button{
    height: 25px;
    padding: 5px 10px;
  }
</style>
